<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Blank Page - Ace Admin</title>

		<meta name="description" content="" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="${ctx}/ace/assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${ctx}/ace/assets/font-awesome/4.2.0/css/font-awesome.min.css" />

		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="${ctx}/ace/assets/css/jquery-ui.min.css" />
		<link rel="stylesheet" href="${ctx}/ace/assets/css/bootstrap-duallistbox.min.css" />

		<!-- text fonts -->
		<link rel="stylesheet" href="${ctx}/ace/assets/fonts/fonts.googleapis.com.css" />

		<!-- ace styles -->
		<link rel="stylesheet" href="${ctx}/ace/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />

		<!--[if lte IE 9]>
			<link rel="stylesheet" href="${ctx}/ace/assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
		<![endif]-->

		<!--[if lte IE 9]>
		  <link rel="stylesheet" href="${ctx}/ace/assets/css/ace-ie.min.css" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->
		<script src="${ctx}/ace/assets/js/ace-extra.min.js"></script>

		<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

		<!--[if lte IE 8]>
		<script src="${ctx}/ace/assets/js/html5shiv.min.js"></script>
		<script src="${ctx}/ace/assets/js/respond.min.js"></script>
		<![endif]-->
		<style type="text/css">
			body {
				font-family: "Open Sans","Microsoft YaHei","Arial","黑体","宋体",sans-serif;
			}
		</style>
	</head>

	<body class="no-skin">
		<!-- header start-->
		<%@include file="../../common/header.jsp"%>
		<!-- header end-->

		<div class="main-container" id="main-container">
			<script type="text/javascript">
				try{ace.settings.check('main-container' , 'fixed')}catch(e){}
			</script>

			<!-- left start -->
			<%@include file="../../common/left.jsp"%>
			<!-- left end -->

			<div class="main-content">
				<div class="main-content-inner">
					<div class="breadcrumbs" id="breadcrumbs">
						<script type="text/javascript">
							try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
						</script>

						<ul class="breadcrumb" style="margin-top:10px;">
							<li>
								<i class="ace-icon fa fa-key"></i>
								<a href="#">User Management</a>
							</li>
							<li class="active">User</li>
						</ul><!-- /.breadcrumb -->

						<div class="nav-search" id="nav-search">
							<form class="form-search">
								<span class="input-icon">
									<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
									<i class="ace-icon fa fa-search nav-search-icon"></i>
								</span>
							</form>
						</div><!-- /.nav-search -->
					</div>

					<div class="page-content">
						<!-- setting start -->
						<%@include file="../../common/setting.jsp"%>
						<!-- setting end -->
						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->
								<div class="table-header">
									Results for "User Records"
								</div>
								<div>
									<table id="users" class="table table-striped table-bordered" 
										cellspacing="0" width="100%">
										<thead>
								            <tr>
								                <!-- <th>ID</th>  -->
								                <th>Account Name</th>
								                <th>User Name</th>
								                <th>Enabled</th>
								                <th>Group</th>
								                <th>Role</th>
								                <th>Operation</th>
								            </tr>
								        </thead>
									</table>
								</div>
								<!-- PAGE CONTENT ENDS -->
							</div><!-- /.col -->
						</div><!-- /.row -->
					</div><!-- /.page-content -->
				</div>
			</div><!-- /.main-content -->

			<!-- footer start -->
			<%@include file="../../common/footer.jsp"%>
			<!-- footer end -->

			<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
				<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
			</a>
		</div><!-- /.main-container -->
		
		<!-- dialog -->
		<div id="dialog-group" class="hide">
			<p>
				This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.
			</p>

			<div class="hr hr-12 hr-double"></div>

			<div class="form-group">
				<div class="col-sm-1"></div>
				<div class="col-sm-10">
					<select multiple="multiple" style="height:160px;" name="userGroup[]" id="userGroup">
					</select>
				</div>
			</div>
			
		</div><!-- #dialog-message -->
		
		<div id="dialog-role" class="hide">
			<p>
				This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.
			</p>

			<div class="hr hr-12 hr-double"></div>

			<div class="form-group">
				<div class="col-sm-1"></div>
				<div class="col-sm-10">
					<select multiple="multiple" style="height:160px;" name="userRole[]" id="userRole">
					</select>
				</div>
			</div>
			
		</div><!-- #dialog-message -->
		

		<!-- basic scripts -->
		
		<!--[if !IE]> -->
		<script src="${ctx}/ace/assets/js/jquery.2.1.1.min.js"></script>

		<!-- <![endif]-->

		<!--[if IE]>
		<script src="${ctx}/ace/assets/js/jquery.1.11.1.min.js"></script>
		<![endif]-->

		<!--[if !IE]> -->
		<script type="text/javascript">
			window.jQuery || document.write("<script src='${ctx}/ace/assets/js/jquery.min.js'>"+"<"+"/script>");
		</script>

		<!-- <![endif]-->

		<!--[if IE]>
		<script type="text/javascript">
		 window.jQuery || document.write("<script src='${ctx}/ace/assets/js/jquery1x.min.js'>"+"<"+"/script>");
		</script>
		<![endif]-->
		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='${ctx}/ace/assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="${ctx}/ace/assets/js/bootstrap.min.js"></script>

		<!-- page specific plugin scripts -->
		<script src="${ctx}/ace/assets/js/jquery-ui.min.js"></script>
		<script src="${ctx}/ace/assets/js/jquery.ui.touch-punch.min.js"></script>
		<script src="${ctx}/ace/assets/js/jquery.dataTables.min.js"></script>
		<script src="${ctx}/ace/assets/js/jquery.dataTables.bootstrap.min.js"></script>
		<script src="${ctx}/ace/assets/js/dataTables.tableTools.min.js"></script>
		<script src="${ctx}/ace/assets/js/dataTables.colVis.min.js"></script>
		<script src="${ctx}/ace/assets/js/jquery.bootstrap-duallistbox.min.js"></script>
		

		<!-- ace scripts -->
		<script src="${ctx}/ace/assets/js/ace-elements.min.js"></script>
		<script src="${ctx}/ace/assets/js/ace.min.js"></script>

		<!-- inline scripts related to this page -->
		<script type="text/javascript">
			$(document).ready(function() {
				var users = $('#users').dataTable( {
			    	"ajax": "${ctx}/system/user/getSysUserAll.xht",
			        "columns":[
	                    { "data": "userAccount" },
	                    { "data": "userName" },
	                    { "data": "enabled" },
	                    { "data": null },
	                    { "data": null },
	                    { "data": null }
	                ],
	                "aLengthMenu": [ 8, 25, 50, 100 ],
	                columnDefs: [
						{
						    targets: 2,
						    render: function (a, b, c, d) {
						    	var html = '';
						    	if(c.enabled) {
						    		html = '<span class="label label-sm label-success">Openning</span>'
						    	} else {
						    		html = '<span class="label label-sm label-error">Closed</span>'
						    	}
						        return html;
						    }
						},
                        {
                            targets: 3,
                            render: function (a, b, c, d) {
                            	var html = '<button type="button" class="btn btn-white btn-info btn-minier" onclick="group(\'' + c.userId + '\')">Group</button>'
                                return html;
                            }
                        },
                        {
                            targets: 4,
                            render: function (a, b, c, d) {
                            	var html = '<button type="button" class="btn btn-white btn-warning btn-minier" onclick="role(\'' + c.userId + '\');">Role</button>'
                                return html;
                            }
                        },
                        {
                            targets: 5,
                            render: function (a, b, c, d) {
                            	var html = '<div class="hidden-sm hidden-xs action-buttons">'
                                html += '<a class="blue" data-rel="tooltip" title="View" href="#"><i class="ace-icon fa fa-search-plus bigger-130"></i></a>';
                                html += '<a class="green" data-rel="tooltip" title="Edit" href="#"><i class="ace-icon fa fa-pencil bigger-130"></i></a>';
                                html += '<a class="red" data-rel="tooltip" title="Delete" href="#"><i class="ace-icon fa fa-trash-o bigger-130"></i></a>'
                                html += '</div>';
                                return html;
                            }
                        }
                        
                        //,{
                        // 	 "searchable": false,
                        //   "orderable": false,
                        //    targets: 0,
                        //    render: function (a, b, c, d) {
                        //    	var html = d.row + 1;
                        //        return html;
                        //    }
                        //}
                    ]
			    });
				
				//override dialog's title function to allow for HTML titles
				$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
					_title: function(title) {
						var $title = this.options.title || '&nbsp;'
						if( ("title_html" in this.options) && this.options.title_html == true )
							title.html($title);
						else title.text($title);
					}
				}));
				
			} );
			
			// group operate
			function group(userId) {
				// 数据收集
				$('#userGroup').html('');
				var params = "userId=" + userId;
		        ajaxJson("${ctx}/system/user/getSysUserGroupByUserId.xht", true, params, function(data) {
		            var groups = data.groups;
		            var html = '';
		            $.each(groups,function(index, group) {
		            	if (group.selected) {
		            		html+='<option value="'+group.groupId+ '" selected="selected">'+group.groupName+'</option>';
		            	} else {
		            		html+='<option value="'+group.groupId+ '">'+group.groupName+'</option>';
		            	}
		        	});
		            $('#userGroup').html(html);
		            
		            // dualListbox
		            var userGroup = $('select[name="userGroup[]"]').bootstrapDualListbox(
							{
								infoTextFiltered: '<span class="label label-purple label-lg">Filtered</span>',
								nonSelectedListLabel: 'Non-selected',
								selectedListLabel: 'Selected'
								
							});
					var container1 = userGroup.bootstrapDualListbox('getContainer');
					container1.find('.btn').addClass('btn-white btn-info btn-bold');
					userGroup.bootstrapDualListbox('refresh', true);
		            
					// dialog
		            var dialog = $( "#dialog-group" ).removeClass('hide').dialog({
						modal: true,
						resizable:false,
						height: 500,
						width:690,
						title: "<div class='widget-header widget-header-small'><h4 class='smaller'><i class='ace-icon fa fa-check'></i> Group </h4></div>",
						title_html: true,
						buttons: [ 
							{
								text: "Cancel",
								"class" : "btn btn-minier",
								click: function() {
									$( this ).dialog( "close" ); 
								} 
							},
							{
								text: "OK",
								"class" : "btn btn-primary btn-minier",
								click: function() {
									var $this = $( this );
									var userGroup = $('[name="userGroup[]"]').val();
									var params = "userId=" + userId;
							        params+="&userGroup=" + userGroup;
							        ajaxJson("${ctx}/system/user/updUserGroupByUserId.xht", true, params, function(data){
							            if (data.rt == '1') {
							            	$this.dialog( "close" ); 
							            } else {
							            	alert('Group Update Error!');
							            }
							        });
								} 
								// ok click end
							}
						]
					});
		        });
			}
			
			// role operate
			function role(userId) {
				// 数据收集
				$('#userRole').html('');
				var params = "userId=" + userId;
		        ajaxJson("${ctx}/system/user/getSysUserRoleByUserId.xht", true, params, function(data) {
		            var roles = data.roles;
		            var html = '';
		            $.each(roles,function(index, role) {
		            	if (role.selected) {
		            		html+='<option value="'+role.roleId+ '" selected="selected">'+role.roleName+'</option>';
		            	} else {
		            		html+='<option value="'+role.roleId+ '">'+role.roleName+'</option>';
		            	}
		        	});
		            $('#userRole').html(html);
		            
		            // dualListbox
		            var userRole = $('select[name="userRole[]"]').bootstrapDualListbox(
							{
								infoTextFiltered: '<span class="label label-purple label-lg">Filtered</span>',
								nonSelectedListLabel: 'Non-selected',
								selectedListLabel: 'Selected'
								
							});
					var container1 = userRole.bootstrapDualListbox('getContainer');
					container1.find('.btn').addClass('btn-white btn-info btn-bold');
					userRole.bootstrapDualListbox('refresh', true);
		            
					// dialog
		            var dialog = $( "#dialog-role" ).removeClass('hide').dialog({
						modal: true,
						resizable:false,
						height: 500,
						width:690,
						title: "<div class='widget-header widget-header-small'><h4 class='smaller'><i class='ace-icon fa fa-check'></i> Group </h4></div>",
						title_html: true,
						buttons: [ 
							{
								text: "Cancel",
								"class" : "btn btn-minier",
								click: function() {
									$( this ).dialog( "close" ); 
								} 
							},
							{
								text: "OK",
								"class" : "btn btn-primary btn-minier",
								click: function() {
									var $this = $( this );
									var userRole = $('[name="userRole[]"]').val();
									var params = "userId=" + userId;
							        params+="&userRole=" + userRole;
							        ajaxJson("${ctx}/system/user/updUserRoleByUserId.xht", true, params, function(data){
							            if (data.rt == '1') {
							            	$this.dialog( "close" ); 
							            } else {
							            	alert('Role Update Error!');
							            }
							        });
								} 
								// ok click end
							}
						]
					});
		        });
			}
			
			// ajax请求
		    function ajaxJson(url, async, params, callback) {
		        $.ajax({
		            type: "POST",
		            async:async,
		            url: url,
		            data :params,
		            dataType : "json",
		            success: function(data){
		                callback(data);
		            }
		        });
		    }
		</script>
		
	</body>
</html>
